<template>
    <div class="common-layout">
        <el-container class="common-layout">
            <el-aside class="aside-left-layout">
                <div class="userinfo">
                    <el-avatar :size="50" :src="circleUrlUserAvater" />
                    <div class="username-email">
                        <el-text class="fullWid username">
                            {{ username }}
                        </el-text>
                        <el-text class="fullWid email" type="info">
                            {{ useremail }}
                        </el-text>
                    </div>
                </div>
                <div class="left-button-list">
                    <el-button v-if="blogRecommedPageButtonStatus" type="" text size="large" :icon="HelpFilled"
                        @click="toBlogRecommedPage">推荐页面</el-button>
                    <el-button v-if="blogMainPageButtonStatus" type="" text size="large" :icon="HomeFilled"
                        @click="toBlogMainPage">博客主页</el-button>
                    <el-button v-if="blogAttentionListButtonStatus" type="" text size="large" :icon="UserFilled"
                        @click="toBlogAttentionList">关注列表</el-button>
                    <el-button v-if="blogFansListButtonStatus" type="" text size="large" :icon="UserFilled"
                        @click="toBlogFansList">粉丝列表</el-button>
                    <el-button v-if="blogCreatPostButtonStatus" type="" text size="large" :icon="CirclePlus"
                        @click="toBlogCreatPost">创建博文</el-button>
                    <el-button v-if="blogGeneralSettingButtonStatus" type="" text size="large" :icon="Setting"
                        @click="toBlogGeneralSetting">通用设置</el-button>
                    <el-button v-if="exitLoginButtonStatus" type="" text size="large" :icon="SwitchButton"
                        @click="toExitLogin">退出登录</el-button>
                </div>
            </el-aside>
            <el-main class="zero-padding">
                <el-container class="common-layout">
                    <router-view></router-view>
                </el-container>
            </el-main>

        </el-container>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { HomeFilled, UserFilled, CirclePlus, Setting, SwitchButton, HelpFilled } from '@element-plus/icons-vue';
import BlogItem from '../../components/BlogItem/BlogItem.vue';
import BlogMainPage from "./BlogMainPage/BlogMainPage.vue";
import router from '@/router';
import store from '@/store';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/utils/request';

// 左上角用户简介
// 测试头像
const state = reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const,
})
// 用户名
const username = ref('用户名')
// 用户邮箱
const useremail = ref('111@163.com')
// 用户头像
const circleUrlUserAvater = ref('')

const { circleUrl, squareUrl, sizeList } = toRefs(state)
// 左侧菜单栏按钮状态
const blogMainPageButtonStatus = ref(true)
const blogAttentionListButtonStatus = ref(true)
const blogFansListButtonStatus = ref(true)
const blogCreatPostButtonStatus = ref(true)
const blogGeneralSettingButtonStatus = ref(true)
const blogRecommedPageButtonStatus = ref(true)
const exitLoginButtonStatus = ref(true)
// 跳转到博客主页
const toBlogMainPage = () => {
    router.push('/blogHomePage')
}
// 跳转到关注列表
const toBlogAttentionList = () => {
    router.push('/blogAttentionList')
}
// 跳转到粉丝列表
const toBlogFansList = () => {
    router.push('/blogFansList')
}
// 跳转到创建博文
const toBlogCreatPost = () => {
    router.push('/blogCreatePost')
}
// 跳转到通用设置
const toBlogGeneralSetting = () => {
    router.push('/blogGeneralSetting')
}
// 跳转到推荐主页
const toBlogRecommedPage = () => {
    router.push('/blogRecommedPage')
}
// 退出登录
const toExitLogin = () => {

    ElMessageBox.confirm(
        '你将退出登录状态，并不可恢复。是否退出？',
        '注意',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            store.dispatch('logout')
            router.push('/')

            ElMessage({
                type: 'success',
                message: '退出登录成功'
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退出登录'
            })
        })
}

/**
 * @description: 根据用户身份初始化左侧菜单栏
 * @Author: 梁晓雨
 * @Date: 2025-03-27 20:05:24
 */
const decideButtonDisplayStatus = async () => {
    const userid = store.getters.getUser.userId;
    // console.log(userid);

    try {
        await request.get(`/user/${userid}`)
            .then(res => {
                // 当用户是游客时
                if (res.data.rights == 'UK') {
                    blogAttentionListButtonStatus.value = false;
                    blogCreatPostButtonStatus.value = false;
                    blogFansListButtonStatus.value = false;
                    blogGeneralSettingButtonStatus.value = false;
                    blogMainPageButtonStatus.value = false;
                    router.push('/blogRecommedPage');
                }

                // 当用户是超管时
                if (res.data.rights == 'AD') {
                    blogAttentionListButtonStatus.value = false;
                    // blogCreatPostButtonStatus.value = false;
                    blogFansListButtonStatus.value = false;
                    blogGeneralSettingButtonStatus.value = false;
                    // blogMainPageButtonStatus.value = false;
                    router.push('/blogRecommedPage');
                }
            })
    } catch (error) {

    }
}

/**
 * @description: 初始化用户简介信息
 * @Author: 梁晓雨
 * @Date: 2025-03-28 16:59:59
 */
const initUserIntroduction = async() => {
    const useridCurrent = store.getters.getUser.userId;
    try {
        await request.get(`/user/${useridCurrent}`)
        .then(res=>{
            username.value = res.data.username;
            useremail.value = res.data.email;
            // 初始化用户头像
            circleUrlUserAvater.value = res.data.userAvater;
        })
    } catch (error) {
        ElMessage({
            type:'error',
            message:'获取用户简介失败'
        })
    }
}

onMounted(
    () => {
        decideButtonDisplayStatus();
        initUserIntroduction();
    }
)
</script>
<style scoped lang="scss">
@use './BlogHomePage.scss' as *;
</style>
